<script setup>
import auFlag from "@images/icons/countries/list-4.png";
import brFlag from "@images/icons/countries/list-2.png";
import frFlag from "@images/icons/countries/list-5.png";
import inFlag from "@images/icons/countries/list-3.png";
import usFlag from "@images/icons/countries/list-1.png";
import { grossProfitTopN } from "@/api/system/dashboards";
import { onMounted, getCurrentInstance, ref, reactive, toRefs } from "vue";
let Data = ref([]);
let salesByCountries = ref([
  {
    avatarImg: usFlag,
  },
  {
    avatarImg: brFlag,
  },
  {
    avatarImg: inFlag,
  },
  {
    avatarImg: auFlag,
  },
  {
    avatarImg: frFlag,
  },
]);

const getlist = async () => {
  let res = await grossProfitTopN("中招国际招标有限公司", 5);
  Data.value = res.data.list;
  Data.value.forEach((item2, index2) => {
    item2.avatarImg = salesByCountries.value[index2].avatarImg;
  });
};
onMounted(() => {
  getlist();
});
</script>

<template>
  <VCard>
    <VCardText>
      <VCardTitle>
        <div class="toniTit">
          <div>
            <div class="Titshu">&nbsp;</div>
            <div style="color: #000; font-size: 20px; font-weight: 900">
              毛利前五名
            </div>
          </div>
          <div style="margin-inline-end: 50px;">统计全国分支机构</div>
          <div>
            <div>(万元)</div>
          </div>
        </div>
      </VCardTitle>
      <VList class="card-list">
        <VListItem v-for="country in Data" :key="country.order">
          <template #prepend>
            <VAvatar
              size="34"
              color="secondary"
              variant="tonal"
              class="me-1"
              :image="country.avatarImg"
            />
          </template>

          <VListItemTitle class="font-weight-medium">
            {{ Number(country.totalGrossProfit).toFixed(2) }}
          </VListItemTitle>
          <VListItemSubtitle>
            {{ country.deptName }}
          </VListItemSubtitle>

          <template #append >
            <div
              :class="`d-flex align-center ${
                country.changeRate < 0 ? 'text-success' : 'text-error'
              }`"
            >
              <VIcon
                :icon="
                  country.changeRate > 0
                    ? 'tabler-chevron-up'
                    : 'tabler-chevron-down'
                "
                size="20"
                class="me-1"
              />
              <div class="font-weight-medium" style="width: 60px;">
                {{ Number(country.changeRate).toFixed(2)}}%
              </div>
            </div>
          </template>
        </VListItem>
      </VList>
    </VCardText>
  </VCard>
</template>

<style lang="scss" scoped>
.card-list {
  --v-card-list-gap: 1rem;

  margin-block-start: 30px;
  margin-inline: 30px;
}

.toniTit {
  display: flex;
  align-items: end;
  justify-content: space-between;
  font-size: 12px;

  > div {
    display: flex;
    align-items: flex-end;
    line-height: 1;
  }
}

.Titshu {
  background-color: blue;
  block-size:22px;
  inline-size: 8px;
  margin-inline-end: 10px;
}
</style>
